<template>
  <div class="home-container">
    <div class="home-up">
      <div class="home-img">
        <img
          src="../assets/home-big.png"
          alt=""
          style="width: 100%;height: 100%;"
        />
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <cheader :title="title"></cheader>
        </div>
        <div>
          <div v-for="(val, index) in list" :key="index" class="text">
            <span class="date">[{{ val.date }}] </span>
            <span>{{ val.text }}</span>
          </div>
        </div>
        <div class="text middle">
          <div>查看全部 》</div>
        </div>
      </el-card>
    </div>
    <div class="home-down">
      <div class="box-width">
        <el-card>
          <div slot="header" class="clearfix">
            <cheader title="公司新闻"></cheader>
          </div>
          <div>
            <div class="left-box">
              <img class="left-img" src="../assets/fengche.png" alt="" />
              <div class="left-text">
                <p class="text1">庆祝公司XXX工程取得突破性进展</p>
                <p class="text2">
                  公司最终成交额达到XXXX，完成了新的突破；我司决定将采……
                </p>
                <p class="text3">2020-10-20</p>
              </div>
            </div>
            <div class="left-box">
              <img class="left-img" src="../assets/fengche.png" alt="" />
              <div class="left-text">
                <p class="text1">庆祝公司XXX工程取得突破性进展</p>
                <p class="text2">
                  公司最终成交额达到XXXX，完成了新的突破；我司决定将采……
                </p>
                <p class="text3">2020-10-20</p>
              </div>
            </div>
            <div class="left-box">
              <img class="left-img" src="../assets/fengche.png" alt="" />
              <div class="left-text">
                <p class="text1">庆祝公司XXX工程取得突破性进展</p>
                <p class="text2">
                  公司最终成交额达到XXXX，完成了新的突破；我司决定将采……
                </p>
                <p class="text3">2020-10-20</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <cheader title="月度之星"></cheader>
        </div>
        <div>
          <div class="rig-box">
            <img class="rig-img" src="../assets/icon1.png" alt="" />
            <img class="rig-per" src="../assets/person1.png" alt="" />
            <p class="name">王一博</p>
            <p class="num">五号车间</p>
          </div>
          <div class="rig-box">
            <img class="rig-img" src="../assets/icon2.png" alt="" />
            <img class="rig-per" src="../assets/person2.png" alt="" />
            <p class="name">赵露思</p>
            <p class="num">六号车间</p>
          </div>
          <div class="rig-box">
            <img class="rig-img" src="../assets/icon3.png" alt="" />
            <img class="rig-per" src="../assets/person3.png" alt="" />
            <p class="name">王哲</p>
            <p class="num">三号车间</p>
          </div>
        </div>
        <div class="text middle">
          <div>查看全部 》</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import cheader from '@/components/header.vue';
export default {
  components: {
    cheader,
  },
  data() {
    return {
      title: '公告',
      list: [
        {
          date: '2020-10-20',
          text: '公司任命王XX为公司财务总监、望王同事和公司共勉',
        },
        {
          date: '2020-10-20',
          text: '公司任命王XX为公司财务总监、望王同事和公司共勉',
        },
        {
          date: '2020-10-20',
          text: '公司任命王XX为公司财务总监、望王同事和公司共勉',
        },
      ],
    };
  },
  created() {
    this.$store.dispatch('user/getInfo');
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  box-sizing: border-box;
}
.home-up {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.home-img {
  width: 70%;
  margin-right: 20px;
}
.text {
  font-size: 16px;
  color: #b1b6c6;
  padding: 20px;
  line-height: 26px;
}
.date {
  color: #3d4147;
  font-weight: 500;
}
.middle {
  margin-top: 15%;
  text-align: center;
}
.home-down {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.box-width {
  width: 70%;
  margin-right: 20px;
}
.left-box {
  display: flex;
  flex-direction: row;
  padding: 20px;
}
.left-img {
  width: 160px;
}
.left-text {
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text1 {
  font-size: 18px;
  font-weight: 500;
  color: #3d4147;
  line-height: 25px;
}
.text2 {
  font-size: 15px;
  font-weight: 500;
  color: #a4a4a4;
  line-height: 21px;
}
.text3 {
  font-size: 14px;
  font-weight: 500;
  color: #3d4147;
  line-height: 20px;
}
.rig-img {
  width: 24px;
  height: 33px;
}
.rig-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}
.rig-per {
  width: 44px;
  height: 44px;
}
.name {
  font-size: 16px;
  font-weight: 500;
  color: #3d4147;
  line-height: 26px;
}
.num {
  font-size: 14px;
  font-weight: 500;
  color: #a4a4a4;
  line-height: 26px;
}
.box-card {
  width: 30%;
}
</style>
